<style lang="scss">
// @import '@/assets/css/variable'; 003792 01617a
.set{
	// background-image: linear-gradient(to bottom, #003792 , #01617a);
	padding-bottom: 40px;
	// position: relative;
	$editWidth: 1.8rem;
	.editBox{
		width: $editWidth; height: $editWidth; position: absolute;top: 12px; right: 12px;
		img{
			width: $editWidth;
		}
	}
	.headBox{
		margin-top: 30px;
	}
	.gridBox{
		margin-top: 20px;
		box-shadow: 0px 3px 7px 0px rgba(59, 115, 246, 0.35);
		border-radius: 10px;
		min-height: 80px;
	}
	.btnBox{
		margin-top: 60px;
	}
	.van-popup{
		background-color: #1093c1;
	}
	.van-cell{
		// color: white !important;
		background: inherit !important;
	}
	.van-field__label{
		color: white !important;
	}
	.van-field__control{
		color: white !important;
	}
}
</style>

<template>
  <div class="set wrapperContent2" v-if="member">
	<div class="mar-t-10">
		<van-cell-group>
		  <van-cell title="更换手机号" icon="edit" :value="member.member_mobile" :size="fontSize==1?'':'large'" is-link @click="clickCell"/>
		  <van-cell title="字体大小" icon="exchange" :size="fontSize==1?'':'large'">
			  <template #extra>
				<van-radio-group v-model="radio" direction="horizontal" @change="changeFontSize">
				  <van-radio :name="1">默认</van-radio>
				  <van-radio :name="2">大号</van-radio>
				</van-radio-group>
			  </template>
		  </van-cell>
		</van-cell-group>
	</div>
	<van-popup v-model="showSetMobile" round class="code_popup" :style="{ width: '80%' }"
	:close-on-click-overlay="false" :close-on-popstate="true" closeable close-icon="close">
		<div class="flex align-center justify-around fc-fff fs-15" style="margin: 16px;">
			更换手机号
		</div>
	  <div style="padding: 0px 10px 0px 4px;">
		   <!-- @submit="submitSetMobile" -->
	    <van-form label-width="72px" @submit="submitSetMobile">
			<van-field
			    v-model="setMobileForm.mobile"
			    type="text"
			    name="mobile"
			    label="新手机号"
				maxlength="11"
			    placeholder="请输入新的手机号"
			/>
	      <van-field
	          v-model="setMobileForm.code"
	          type="number"
	          name="code"
	          label="验证码"
			  maxlength="6"
	          placeholder="验证码"
	      >
			<template #button>
				<van-button class="sendCodeBtn" size="small" color="linear-gradient(to left, #F1D331 , #FC9600)" @click.prevent="sendCode" :loading="loading4SendCode" :disabled="(downTime>0&&downTime<60)">{{(downTime>0&&downTime<60)?`${downTime}秒后可重发`:'获取验证码'}}</van-button>
			</template>
		  </van-field>
	      <div style="margin: 16px;padding-top: 10px;">
	        <van-button round block color="#017494" native-type="submit" loading-text="提交中...">提交</van-button>
	      </div>
	    </van-form>
	  </div>
	</van-popup>
	<van-popup v-model="showSetPassword" round class="code_popup" :style="{ width: '80%' }"
	:close-on-click-overlay="false" :close-on-popstate="true" closeable close-icon="close">
		<div class="flex align-center justify-around fc-fff fs-15" style="margin: 16px;">
			设置密码
		</div>
	  <div style="padding: 0px 10px 0px 4px;">
	    <van-form @submit="submit" label-width="72px">
			<van-field
			    v-model="setPasswordForm.password"
			    type="text"
			    name="password"
			    label="请输入密码"
				maxlength="11"
			    placeholder="请输入密码"
			/>
	      <van-field
	          v-model="setPasswordForm.code"
	          type="number"
	          name="code"
	          label="验证码"
			  maxlength="6"
	          placeholder="验证码"
	      >
			<template #button>
				<van-button size="small" color="linear-gradient(to left, #F1D331 , #FC9600)" @click="downEvent">{{(downTime>0&&downTime<60)?`${downTime}秒后可重发`:'获取验证码'}}</van-button>
			</template>
		  </van-field>
	      <div style="margin: 16px;padding-top: 10px;">
	        <van-button round block color="#017494" native-type="submit" loading-text="提交中...">提交</van-button>
	      </div>
		  <div class="flex align-center justify-between" style="margin: 16px;">
			<div @click="clickCheck">
				<van-checkbox v-model="isCheck"><span class="fc-fff text-underline">今日不再弹出</span></van-checkbox>
			</div>
			<div class="text-underline fc-fff" @click="closePop">暂不设置</div>
		  </div>
	    </van-form>
	  </div>
	</van-popup>
	<van-popup v-model="showValidatePasswordPop" round class="code_popup" :style="{ width: '80%' }"
	:close-on-click-overlay="false" :close-on-popstate="true" closeable close-icon="close">
	<div class="flex align-center justify-around fc-fff fs-15" style="margin: 16px;">
		校验密码
	</div>
	  <div style="padding: 0px 10px 0px 4px;">
	    <van-form @submit="submit" label-width="72px">
			<van-field
			    v-model="setPasswordForm.password"
			    type="text"
			    name="password"
			    label="请输入密码"
			    placeholder="请输入密码"
			/>
	      <div style="margin: 16px;padding-top: 10px;">
	        <van-button round block color="#017494" native-type="submit" loading-text="提交中...">提交</van-button>
	      </div>
		</van-form>
	  </div>
	</van-popup>
  </div>
</template>
<script>
	import {Dialog,Toast} from "vant";
	import cellItem from '@/components/cell/cellItem.vue'
	import { mapGetters, mapActions } from "vuex";
export default {
	name:'set',
  components: {cellItem},
  data() {
    return {
		loading4SendCode:false,
		showSetMobile:false,
		setMobileForm:{
			mobile:'',
			code:''
		},
		showSetPassword:false,//设置密码
		setPasswordForm:{
			password:'',
			code:''
		},
		downTime:60,
		t:'',
		isCheck:false,
		todaySet:{
			createTime:'',
			isCheck:''
		},
		showValidatePasswordPop:false,//校验密码
		userInfo:'',
		radio:1,
		fontSize:localStorage.getItem('fontSize') || 1
    };
  },
  computed: {
    ...mapGetters(['member']),
  },
  created() {
	  this.radio = Number(localStorage.getItem('fontSize') || 1)
	  console.log('this.radio',this.radio)
	  this.GET_Member({})
  },
  beforeDestroy() {
    if (this.t) {
      clearInterval(this.t);
    }
  },
  mounted() {
	  console.log('$route.meta.isShowTabbar',this.$route.meta.isShowTabbar)
	  // 不同情况刷新页面 让tabbar正常停留在之前的页面
	let params = window.location.hash;
	let hash = params.substr(2);
	this.bus.$emit('refreshTabbar',hash)
	// 若没设置密码，今日是否弹出设置密码框
	// let lastCheck = JSON.parse(localStorage.getItem('todaySet'))
	// let lastCheckDate = lastCheck.createTime
	// if(lastCheckDate==this.$utils.parseToDateYMD(new Date())){
	// 	this.showSetPassword = false
	// }
	//初始化字体大小
	
  },
  methods:{
	  ...mapActions(['GET_Member']),
	  changeFontSize(e) {
		  console.log('e',e)
		  localStorage.setItem('fontSize',e)
		  location.reload()
	  },
	  clickCell() {
		  console.log('clickCell')
		  this.showSetMobile = true
	  },
	  changeInputImg(e) {
		  console.log('e',e)
	  },
	  outLogin() {
		  this.$request.outLogin().then(res=>{
			  console.log('res_outLogin',res)
			  this.$router.replace('/login')
		  })
	  },
	  toEditView(path) {
	  	this.$router.push(path)
	  },
	  closePop() {
		  if(this.isCheck){
			  this.todaySet.createTime = this.$utils.parseToDateYMD(new Date())
			  this.todaySet.isCheck = this.isCheck
			  console.log('this.todaySet',this.todaySet)
			  localStorage.setItem('todaySet',JSON.stringify(this.todaySet))
		  }
		  this.showSetPassword=false
	  },
	  clickCheck() {
		  this.isCheck = !this.isCheck
		  console.log("this.isCheck",this.isCheck)
	  },
	downEvent() {
	  this.t = setInterval(()=>{
		  this.downTime--
		  if(this.downTime<=0){
			  this.downTime = 60
			  clearInterval(this.t)
		  }
	  },1000)
	},
	sendCode(){
	  if(this.setMobileForm.mobile == ""||!this.$reg.phone.test(this.setMobileForm.mobile)){
	    Dialog({ title:'温馨提示', message: "请输入合法手机号", closeOnClickOverlay:true });
	    return;
	  }
	  this.loading4SendCode = true
	  Toast.loading({
	    message: '加载中...',
	    forbidClick: true,
	  });
	  this.downEvent()
	  this.$request.apiSendCode({mobile:this.setMobileForm.mobile}).then(res=>{
	      console.log('res',res)
	    if(res.code == 200){
		  this.setMobileForm.code = res.data.code
		  
	    }
	  }).finally(res=>{
		  this.loading4SendCode = false
		  Toast.clear()
	  });
	},
	submitSetMobile(values){
		console.log('submitSetMobile')
		// values.id = this.member.id
		console.log('values',values)
		if(values.mobile == ""){
		  Dialog({ title:'温馨提示', message: "手机号码不能为空", closeOnClickOverlay:true });
		  return;
		}
		console.log('values.code',values.code)
		if(values.code == ""){
		  Dialog({ title:'温馨提示', message: "短信验证码不能为空", closeOnClickOverlay:true });
		  return;
		}
		this.$request.updateMobile(values).then(res=>{
			if(res.code == 200) {
				this.showSetMobile = false
				Dialog.alert({
				  title: '温馨提示',
				  message: '更换成功',
				}).then(() => {
				  // on close
				  this.GET_Member({})
				});
			}
		})
	},
    submit(){
		
	}
  }
}

</script>